<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link rel="icon" href="../common/images/logo.ico">
    <title>love小橙子</title>
    <link rel="stylesheet" type="text/css" href="./css/lovexhj.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" type="text/css" href="./css/FiraCode.css">
</head>

<body>
    <!-- 标题板块 -->
    <div class="title">
        <img src="./images/bg1.gif" alt="bgGif">
        <p id="tqyxhj"></p>
    </div>

    <!-- 分页1 -  -->
    <div class="page page1">
        <div class="swiper-container swiper-container-lovexhj1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="page1-lovexhj1">
<!--                        <img src="https://q1.qlogo.cn/g?b=qq&nk=304915556&s=640" alt="xhj">-->
                        <img src="./images/cat.gif" alt="cat">
<!--                        <img src="https://q1.qlogo.cn/g?b=qq&nk=1656071287&s=640" alt="tqy">-->
                        <p id="lovetime"></p>
                        <p>这是一份小橙子的礼物</p>
                        <p>稍微写点东西吧</p>
                        <span class="right">往右划动 →</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page1-lovexhj1">
                        <img class="cat" src="./images/cat2.gif" alt="cat2">
<!--                        <p class="catText">你常对我发的表情 ↑</p>-->
                        <p>祝你每天开心没有烦恼</p>
                        <p>祝你心有所想，事有所成</p>
                        <p>祝你收获所有的爱</p>
                        <span class="right">再划一下 →</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page1-lovexhj1">
                        <img class="cat" src="./images/cat3.gif" alt="cat3">
                        <p class="catText">抱死你 ↑</p>
                        <p>小橙子</p>
                        <p>宝贝</p>
                        <p style="font-size: 13px;">
                            友情宝儿
                        </p>
                        <p>满目星河皆是你</p>
                        <span class="right">再划一次吧 →</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page1-lovexhj1">
                        <img class="cat" src="./images/cat4.gif" alt="cat4">
                        <p class="catText">拍你猪头 ↑</p>
                        <p>希望你喜欢呀</p>
                        <p>爱你哟(๑′ᴗ‵๑)</p>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination swiper-pagination-lovexhj1"></div>
        </div>
    </div>

    <!-- 分页2 - 时间轴 -->
    <div class="page page2">
        <div class="swiper-container swiper-container-lovexhj2">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/start.jpg" alt="page2-1">
                        <p><b>故事的开始</b></p>
                        <p>我们的故事，始于雨林</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/shayu01.jpg" alt="page2-3">
                        <p><b>那一天似乎很平凡</b></p>
                        <p>天气有点潮湿</p>
                        <p>蜡烛总也点不着</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/shayu02.jpg" alt="page2-4">
                        <p><b>那天</b></p>
                        <p>我们聊了好多</p>
                        <p>也很开心</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/shayu03.jpg" alt="page2-5">
                        <p><b>后来啊</b></p>
                        <p>你带我去打卡千鸟城</p>
                        <p>告诉我你还有点事情，就自己走了</p>
                        <p>留下我独自在风中凌乱</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/shayu04.jpg" alt="page2-6">
                        <p><b>那天</b></p>
                        <p>我第一次叫你小橙子</p>
                        <p>很俗气但我很喜欢这样叫你</p>
                        <p>因为很亲切</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/shayu05.jpg" alt="page2-7">
                        <p><b>因为一些原因</b></p>
                        <p>我知道你是一个小醋坛子</p>
                        <p>你问我讨厌你吗</p>
                        <p>我</p>
                        <p>最喜欢有小脾气的人了</p>
                        <p>每天喜欢的像个宝，怎么会讨厌呢</p>

                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/shayu06.jpg" alt="page2-8">
                        <p><b>你的情绪</b></p>
                        <p>牵动着我每一根神经</p>
                        <p>我想看着你成长</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/shayu07.jpg" alt="page2-9">
                        <p><b>或许</b></p>
                        <p>我们的确未曾相识</p>
                        <p>但这不妨碍我们的相识相知</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/shayu08.jpg" alt="page2-10">
                        <p><b>未来？？</b></p>
                        <p>期待一下</p>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination swiper-pagination-lovexhj2"></div>
        </div>
    </div>

    <!-- 分页3 - 一段话 -->
    <div class="page page3">
        <div id="talkToXHJ">
            <b>回顾我们相识的每一天</b>
            <br />
            你的小脾气让我感觉到一个可爱的你，你时不时整上一出emo让我想抱抱你，你的可爱善良让人觉得非常安心。
            <br />
            <br />
            <b>我在你身上感受到了前进的动力</b>
            <br />
            现在你已经开学了呢
            <br />
            你知道吗？从你开学的那一天，我就开始计时
            <br />
            记录每一天
            <br />
            你在学校努力，我在这边努力
            <br />
            <br />
            <b>以及</b>
            <br />
            记录想你的每一天，你还记得惩罚吗啊哈哈哈
            <br />
            将一些话用文字记录，传递给你
            <br />
            每天快乐宝贝
            <br />
            (๑′ᴗ‵๑)~ ❤
        </div>
    </div>

    <!-- 分页4 - 结尾 -->
    <div class="page page4">
        <div class="page4-box">
            <div class="page4-img">
                <div class="swiper-container swiper-container-lovexhj3">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./images/sky01.jpg" alt="page-4-1">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/sky18.jpg" alt="page-4-2">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/sky23.jpg" alt="page-4-3">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/sky31.jpg" alt="page-4-4">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/sky42.jpg" alt="page-4-5">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/sky44.jpg" alt="page-4-6">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/sky59.jpg" alt="page-4-7">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/sky_sleep01.jpg" alt="page-4-8">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/sky_sleep02.jpg" alt="page-4-9">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/sky_sleep03.jpg" alt="page-4-10">
                        </div>
                    </div>
                    <div class="swiper-button-prev swiper-button-prev-lovexhj3"></div>
                    <div class="swiper-button-next swiper-button-next-lovexhj3"></div>
                </div>
            </div>
            <div class="page4-text">
                <h1>Send To Future</h1>
                <p>有你在的每一天都好快乐</p>
            </div>
        </div>

        <div class="footer">
            <div class="footerBox">
            </div>
        </div>
    </div>
    <!-- 分页5 -  -->
    <div class="page page1">
        <div class="swiper-container swiper-container-lovexhj1">
            <div class="swiper-wrapper ">
                <div class="swiper-slide page5-bcg">
                    <div class="page1-lovexhj1 ">
                        <!--                        <img src="https://q1.qlogo.cn/g?b=qq&nk=304915556&s=640" alt="xhj">-->
                        <img src="./images/cat.gif" alt="cat">
                        <!--                        <img src="https://q1.qlogo.cn/g?b=qq&nk=1656071287&s=640" alt="tqy">-->
                        <h3 id="story"><a onclick="dropDown()">点击查看一段故事</a></h3>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination swiper-pagination-lovexhj1"></div>
        </div>
    </div>

    <!-- 两只小猪 -->
    <div class="xhjIsPig">
        <img src="./images/pig1.gif" alt="pig1" class="pig1">
        <img src="./images/pig2.gif" alt="pig2" class="pig2">
    </div>

    <!-- js加载 -->
    <script src="https://cdn.bootcss.com/wow/1.1.2/wow.js"></script>
    <script src="./js/typeit.min.js"></script>
    <script src="./js/swiper-3.4.2.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>

    <script src="./js/talk.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/su.js"></script>
    <script>
        (function () {
            new WOW().init()
        })()
    </script>

    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('body').wpSuperSnow({
                flakes: ['./images/004.png', './images/003.png', './images/002.png',
                    './images/001.png','./images/005.png'
                ],
                totalFlakes: '100',
                zIndex: '999999',
                maxSize: '30',
                maxDuration: '20',
                useFlakeTrans: false
            });
        });
    </script>
    <script>
        function dropDown(){
            window.location.href="../heart-image/login.html";
        }
    </script>

</body>

</html>